// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/load.gif'
import Confirm from './Confirm'
import Message from './Message'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'

// 参数：1.目录 2.是否加载子目录 3.加载的正则匹配
// 返回一个 导入函数
const importFn = require.context('./', false, /\.vue$/)
// console.log(importFn.keys) //匹配到的文件名数组

/*
   Vue2 全局注册组件
   Vue.component('组件名',组件)
   Vue3 全局注册组件
   app.component('组件名',组件)
*/

export default {
// install 这种写法以后是提供给app.use()安装组件库用的
  install (app) {
    //  vue3 全局注册组件
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)
    app.config.globalProperties.$config = Confirm
    app.config.globalProperties.$message = Message
    // 遍历文件名数组
    importFn.keys().forEach(item => {
      // 导入函数根据文件名导入文件内容
      const component = importFn(item).default
      // console.log(component)
      // 根据导入的组件文件实现自动全局注册
      app.component(component.name, component)
    })

    //  v-src 是自己定义的
    // 调用指令通过 v-src="xxx" 调用
    app.directive('src', {
      mounted (target, { value }) {
        const { stop } = useIntersectionObserver(
          target,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // console.log('图片可见设置图片src', isIntersecting, target, value)
              // 图片分区进入可视区，设置图片的 src
              target.src = value
              // 如果图片加载失败，设置默认图
              target.onerror = () => {
                target.src = defaultImg
              }
              stop()
            }
          },
          // 优化： 0 元素刚进入可视区触发，1 表示元素完整进入可视区才触发
          { threshold: [0.1] }
        )
      }
    })
  }
}
